<!-- 产品管理列表 -- 禹光彩 -- 2017-7-18 10:21:58 -->
<template>
  <div>
    <el-tabs type="card"  @tab-click="handleClick" :value="product.auditState">
      <el-tab-pane label="全部" name="-1"></el-tab-pane>
      <el-tab-pane label="待提交" name="0"></el-tab-pane>
      <el-tab-pane label="审核中" name="1"></el-tab-pane>
      <el-tab-pane label="已审核" name="2"></el-tab-pane>
      <el-tab-pane label="已驳回" name="3"></el-tab-pane>
      <el-tab-pane label="已废弃" name="4"></el-tab-pane>
    </el-tabs>
    <!-- 查询条件 -->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="product">
        <el-form-item>
          <el-input v-model="product.productCode" size="small" placeholder="产品编号" style="margin-top:4px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="product.productMainTitle" size="small" placeholder="来单产品名称" style="margin-top:4px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="product.supplyProductName" size="small" placeholder="供应商产品名称" style="margin-top:4px;"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="product.dpt" size="small" placeholder="出发地" style="margin-top:4px"></el-input>
          <!--<city ref="arrCitySel" cname="目的地"></city>-->
        </el-form-item>
        <el-form-item>
          <el-input v-model="product.arr" size="small" placeholder="目的地" style="margin-top:4px"></el-input>
          <!--<city2 ref="arrCitySel"></city2>-->
        </el-form-item>
        <div style="margin-top:-6px">
          <el-form-item v-if="loginType === 0">
            <el-select v-model="product.companyId" size="small" filterable placeholder="供应商名称" :clearable="true" style="margin-top:4px">
              <el-option
                v-for="item in companyList"
                :key="item.id"
                :label="item.companyName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="product.productType" size="small" placeholder="产品类型" style="margin-top:4px" clearable>
              <el-option label="跟团游" value="group"></el-option>
              <el-option label="自由行" value="free" ></el-option>
              <el-option label="主题游" value="themt" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="product.productState" size="small" placeholder="产品状态" style="margin-top:4px" clearable>
              <el-option label="有效" value="true"></el-option>
              <el-option label="无效" value="false" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-on:click="search" size="small" style="line-height:14px;width:90px;">查&nbsp;&nbsp;&nbsp;询</el-button>
          </el-form-item>
          <el-form-item class="button-align">
            <el-button type="danger" :disabled="this.sels.length===0" size="small" @click="batchDelete"
                       v-show="getAuth(0) && product.auditState === '4'">批量删除</el-button>
          </el-form-item>
          <el-form-item class="button-align">
            <el-button type="primary" :disabled="this.sels.length===0" size="small" @click="batchOffTheShelf"
                       v-if="getAuth(1) && product.auditState === '2'">批量下架</el-button>
          </el-form-item>
          <el-form-item class="button-align"  v-if="getAuth(14) && loginType === 1">
            <el-button type="primary" size="small" @click="releaseProducts">产品发布</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-col>
    <!--列表-->
    <el-table :data="productList" v-loading="listLoading" @selection-change="selsChange" border style="width: 100%; font-size: 12px;" row-class-name="tabRow" tooltipEffect="light">
      <el-table-column type="selection" v-show="getAuth(0) && product.auditState === '4'"></el-table-column>
      <el-table-column align="center" prop="productCode" label="产品编号" width="130"></el-table-column>
      <el-table-column align="center" prop="productMainTitle" label="来单产品名称" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="supplyProductName" label="供应商产品名称" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" :formatter="formatProductType" label="产品类型" width="100px;"></el-table-column>
      <el-table-column align="center" prop="dpt" label="出发地" width="100px;"></el-table-column>
      <el-table-column align="center" prop="arr" label="目的地" width="100px;"></el-table-column>
      <el-table-column align="center" :formatter="formatProductState" label="产品状态" width="100px;"></el-table-column>
      <el-table-column align="center" :formatter="formatterAuditState" label=" 审核状态 " width="100px;"></el-table-column>
      <el-table-column align="center" width="150" label="操作">
        <template scope="scope">
          <el-dropdown trigger="click">
            <el-button type="primary" size="small">
              更多操作<i class="el-icon-caret-bottom el-icon--right"></i>
            </el-button>
            <el-dropdown-menu scope="dropdown" style="text-align: center;color: #20a0ff;font-size: 12px;min-width: 80px;">
              <span v-if="scope.row.auditState === 1 && getAuth(2) && loginType === 0" @click="skipFun(scope.row, '产品审核', 'audits')">
                <el-dropdown-item>审核</el-dropdown-item>
              </span>
              <span v-if="getAuth(4) && scope.row.productState" @click="productShelfFun(scope.row)">
                <el-dropdown-item>下架</el-dropdown-item>
              </span>
              <span v-if="getAuth(5)" @click="skipFun(scope.row, '查看产品', 'look')">
                <el-dropdown-item>查看</el-dropdown-item>
              </span>
              <span v-if="getAuth(3) && (loginType === 0 ? scope.row.auditState !== 4 :(scope.row.auditState !== 4 && scope.row.auditState !== 1 && loginType === 1))" @click="skipFun(scope.row, '编辑产品', 'edit')">
                <el-dropdown-item>编辑</el-dropdown-item>
              </span>
              <span v-if="getAuth(12) && loginType === 1" @click="copyProduct(scope.row)">
                <el-dropdown-item>复制</el-dropdown-item>
              </span>
              <span v-if="getAuth(9) && !scope.row.productState && (scope.row.auditState === 0 || scope.row.auditState === 1 || scope.row.auditState === 3)"
                    @click="scrap(scope.row)">
                <el-dropdown-item>废弃</el-dropdown-item>
              </span>
              <span v-if="getAuth(10) && !scope.row.productState && scope.row.auditState === 4" @click="restoreFun(scope.row)">
                <el-dropdown-item>还原</el-dropdown-item>
              </span>
              <span v-if="scope.row.auditState === 4 && !scope.row.productState && getAuth(6)" @click="deletefun(scope.row)">
                <el-dropdown-item>删除</el-dropdown-item>
              </span>
              <span v-if="(scope.row.auditState === 0 || scope.row.auditState === 3) && getAuth(2) && loginType === 1" @click="submitAudits(scope.row)">
                <el-dropdown-item>提交审核</el-dropdown-item>
              </span>
              <span v-if="getAuth(7) && scope.row.auditState === 3" @click="rejectReason(scope.row)">
                <el-dropdown-item>驳回原因</el-dropdown-item>
              </span>
              <span v-if="getAuth(13) && loginType === 1" @click="skipFun(scope.row, '价格库存', 'price')">
                <el-dropdown-item>价格库存</el-dropdown-item>
              </span>
              <span v-if="getAuth(8)" @click="operatLog(scope.row)">
                <el-dropdown-item>操作日志</el-dropdown-item>
              </span>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24" class="toolbar" style="margin-top: 15px;" v-show="!listLoading">
      <el-pagination id="pagination" layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 30]" :page-size="pageSize" :current-page="page" :total="total" style="float:right;" @size-change="handleSizeChange" @current-change="handleCurrentChange">
      </el-pagination>
    </el-col>
    <!-- 操作日志弹框 -->
    <el-dialog title="操作日志" :close-on-click-modal="false" size="large" style="width: 1000px;margin:0 auto;overflow:hidden" :visible.sync="dialogTableVisible">
      <el-table :data="operationLogData" v-loading="listLoading1" :border="true">
        <el-table-column property="author" label="操作人" width="200" align="center"></el-table-column>
        <el-table-column :formatter="formatCreateTime" label="操作时间" width="200" align="center"></el-table-column>
        <el-table-column property="message" label="操作内容" align="center">
          <template scope="scope">
            <div :title="scope.row.message">{{ formatVal(scope.row.message, 30) }}</div>
          </template>
        </el-table-column>
      </el-table>
      <el-col :span="24" class="toolbar" style="margin-top: 15px;margin-bottom:20px;" v-show="!listLoading1">
        <el-pagination id="pagination" layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 30]" :page-size="pageSize1" :current-page="page1" :total="total1" style="float:right;" @size-change="handleSizeChange1" @current-change="handleCurrentChange1">
        </el-pagination>
      </el-col>
    </el-dialog>
    <el-dialog title="驳回原因" :visible.sync="isshowauditResult" size="tiny">
      <span>{{ product.auditResult }}</span>
      <span scope="footer" class="dialog-footer">
        <el-button type="primary" @click="isshowauditResult = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
  import {resetBreads, sessionOut} from '../../smartlight/common/js/util.js'
  export default {
    data () {
      return {
        tabFlag: true,
        sels: [], // 批量操作列表
        listLoading: false,
        listLoading1: false,
        loginType: '',
        productTypeArray: {'group': '跟团游', 'free': '自由行', 'themt': '主题游'},
        productStateArr: {'true': '有效', 'false': '无效'},
        auditStateArr: {0: '待提交', 1: '审核中', 2: '已审核', 3: '已驳回', 4: '已废弃'},
        productList: [],
        total: 2,
        page: 1,
        pageSize: 10,
        product: {
          id: '',
          companyId: '',
          productCode: '', // 产品编号
          productType: '', // 产品类型
          dpt: '', // 出发地
          arr: '', // 目的地
          productMainTitle: '', // 途游产品名称主标题
          supplyProductName: '', // 供应商产品名称
          productState: '', // 产品状态,true=有效,false= 无效
          auditState: '-1', // 审核状态,-1=全部，0=待提交,1=审核中,2=已审核,3=已驳回，4=已废弃
          auditResult: ''
        },
        product1: {
          id: ''
        },
        opLog: {
          author: '',
          createTime: '',
          message: ''
        },
        total1: 0,
        page1: 1,
        pageSize1: 10,
        dialogTableVisible: false,
        isshowauditResult: false,
        companyList: [], // 公司集合
        operationLogData: [], // 操作日志
        // 批量删除，批量下架，审核，编辑，下架，查看，删除，驳回原因，操作日志，废弃，还原,查询
        adminButtons: [551, 552, 553, 585, 554, 555, 556, 557, 559, 571, 572, 582],
        // 批量删除，批量下架，提交审核，编辑，下架，查看，删除，驳回原因，操作日志，废弃。还原，查询，复制,价格库存，产品发布
        ebButtons: [560, 561, 562, 563, 566, 564, 565, 587, 567, 569, 570, 583, 588, 568, 586]
      }
    },
    methods: {
      checkIfLogin () { // 判断是否登录超时
        var user = sessionStorage.getItem('user')
        if (!user) {
          this.$alert('登录超时，请重新登录！', ' ', {
            type: 'warning'
          }).then(() => {
            this.$router.push({path: '/login'})
            sessionStorage.clear()
          })
        } else {
          return true
        }
      },
      // 信息格式化
      formatVal (val, num) {
        if (val.length > num) {
          return val.substring(0, num) + '...'
        }
        return val
      },
      handleClick (tab, event) {
        if (tab.name === -1) {
          this.tabFlag = true
        } else {
          this.tabFlag = false
        }
        this.page = 1
        this.pageSize = 10
        this.product.auditState = tab.name
        this.initProductList()
      },
      // 产品类型
      formatProductType (row, index) {
        return this.productTypeArray[row.productType]
      },
      // 产品状态
      formatProductState (row, index) {
        return this.productStateArr[row.productState]
      },
      // 审核状态
      formatterAuditState (row, index) {
        return this.auditStateArr[row.auditState]
      },
      // 运营审核--页面跳转
      skipFun (row, pageName, pageType) {
        if (!this.checkIfLogin()) {
          return
        }
        this.$store.dispatch('updatelocationpath', '/product')
        let breads = this.$store.state.breads
//        breads.push(pageName)
        this.$store.dispatch('updateBreads', breads)
        this.$store.dispatch('showActive', {url: '/product'})
        // 更新sessionStorage
        sessionStorage.setItem('breads', breads)
        sessionStorage.setItem('menuUrl', '/product')
        this.$router.push({name: 'productAll', params: {pageType: pageType, id: row.id}})
//        this.$router.push({path: '/product', params: {pageType: pageType, id: row.id}})
      },
      // 删除，批量删除
      deletefun (row) {
        var ids = []
        ids.push(row.id)
        this.deleteProduct(ids, '')
      },
      // 批量删除
      batchDelete () {
        var ids = []
        this.sels.map(item => {
          ids.push(item.id)
        })
        this.deleteProduct(ids, '')
      },
      // 删除方法
      deleteProduct (ids, content) {
        if (!this.checkIfLogin()) {
          return
        }
        let prompt = '确认删除选中记录吗？'
        var params = {
          type: this.loginType,
          clickType: content,
          ids: ids
        }
        if (content !== '') {
          prompt = '确认下架选中产品吗？'
        }
        this.$confirm(prompt, ' ', {
          type: 'warning'
        }).then(() => {
          this.$http.post('/smartLight/web/productTour/deleteOrBatchRelease.htm', params).then(response => {
            var resBody = response.body
            if (resBody.isSuccess === 0) {
              this.$message({
                showClose: true,
                message: '操作成功',
                type: 'success'
              })
              this.initProductList()
            } else if (resBody.isSuccess === 2) {
              sessionOut(this) // session超时处理
            } else {
              this.$message({
                showClose: true,
                message: '操作失败',
                type: 'error'
              })
            }
          })
        }).catch(() => {})
      },
      // 下架
      productShelfFun (row) {
        var ids = []
        ids.push(row.id)
        this.deleteProduct(ids, 'xiajia')
      },
      // 批量下架
      batchOffTheShelf () {
        var ids = []
        this.sels.map(item => {
          ids.push(item.id)
        })
        this.deleteProduct(ids, 'xiajia')
      },
      // 供应商提交审核  审核状态为待提交、已驳回时显示此按钮。产品创建之后的产品状态是无效，审核状态是待提交。产品状态仍是无效，审核状态为审核中。提交审核成功之后记录一条操作日志
      submitAudits (row) {
        if (!this.checkIfLogin()) {
          return
        }
        this.$confirm('确认提交审核产品吗？', ' ', {
          type: 'warning'
        }).then(() => {
          this.$http.post('/smartLight/web/productTour/submitAudits.htm', {type: this.loginType, id: row.id}).then(response => {
            var resBody = response.body
            if (resBody.isSuccess === 0) {
              this.$message({
                showClose: true,
                message: '操作成功',
                type: 'success'
              })
              this.initProductList()
            } else if (resBody.isSuccess === 2) {
              sessionOut(this) // session超时处理
            } else {
              this.$message({
                showClose: true,
                message: resBody.errorMsg,
                type: 'error'
              })
            }
          })
        }).catch(() => {})
      },
      // 供应商复制按钮，新增一条产品
      copyProduct (row) {
        if (!this.checkIfLogin()) {
          return
        }
        this.$confirm('确认复制该产品吗？', ' ', {
          type: 'warning'
        }).then(() => {
          this.$http.post('/smartLight/web/productTour/copyProduct.htm', {type: this.loginType, id: row.id}).then(response => {
            var resBody = response.body
            if (resBody.isSuccess === 0) {
              this.$message({
                showClose: true,
                message: '操作成功',
                type: 'success'
              })
              this.initProductList()
            } else if (resBody.isSuccess === 2) {
              sessionOut(this) // session超时处理
            } else {
              this.$message({
                showClose: true,
                message: resBody.errorMsg,
                type: 'error'
              })
            }
          })
        }).catch(() => {})
      },
      // 发布产品
      releaseProducts () {
        this.$router.push({name: 'productAll', params: {pageType: 'add'}})
      },
      // 废弃、
      scrap (row) {
        if (!this.checkIfLogin()) {
          return
        }
        this.$confirm('确认废弃该产品吗？', ' ', {
          type: 'warning'
        }).then(() => {
          this.$http.post('/smartLight/web/productTour/scrapProduct.htm', {type: this.loginType, id: row.id}).then(response => {
            var resBody = response.body
            if (resBody.isSuccess === 0) {
              this.$message({
                showClose: true,
                message: '操作成功',
                type: 'success'
              })
              this.initProductList()
            } else if (resBody.isSuccess === 2) {
              sessionOut(this)
            } else {
              this.$message({
                showClose: true,
                message: '操作失败',
                type: 'error'
              })
            }
          })
        }).catch(() => {})
      },
      // 还原
      restoreFun (row) {
        if (!this.checkIfLogin()) {
          return
        }
        this.$confirm('确认还原该产品吗？', ' ', {
          type: 'warning'
        }).then(() => {
          this.$http.post('/smartLight/web/productTour/restoreProduct.htm', {type: this.loginType, id: row.id}).then(response => {
            var resBody = response.body
            if (resBody.isSuccess === 0) {
              this.$message({
                showClose: true,
                message: '操作成功',
                type: 'success'
              })
              this.initProductList()
            } else if (resBody.isSuccess === 2) {
              sessionOut(this) // session超时处理
            } else {
              this.$message({
                showClose: true,
                message: '操作失败',
                type: 'error'
              })
            }
          })
        }).catch(() => {})
      },
      // 查看驳回原因
      rejectReason (row) {
        this.isshowauditResult = true
        this.product.auditResult = row.auditResult
      },
      // 【查询】
      search () {
        if (!this.checkIfLogin()) {
          return
        }
        this.page = 1
        this.initProductList()
      },
      // 分页插件查询方法-条数
      handleSizeChange (val) {
        this.pageSize = val
        this.initProductList()
      },
      // 分页插件查询方法-页数
      handleCurrentChange (val) {
        this.page = val
        this.initProductList()
      },
      // 操作日志分页
      handleSizeChange1 (val) {
        this.pageSize1 = val
        var params = {
          productId: this.product1.id,
          pageNumber: this.page1,
          pageSize: this.pageSize1,
          type: this.loginType
        }
        this.operatLogList(params)
      },
      handleCurrentChange1 (val) {
        this.page1 = val
        var params = {
          productId: this.product1.id,
          pageNumber: this.page1,
          pageSize: this.pageSize1,
          type: this.loginType
        }
        this.operatLogList(params)
      },
      // 选中行
      selsChange: function (sels) {
        this.sels = sels
      },
      getAllCompany () {
        this.$http.post('/smartLight/web/productTour/getAllCompoany.htm', {type: this.loginType}).then(response => {
          var resBody = response.body
          if (resBody.isSuccess === 0) {
            this.total = resBody.total
            this.companyList = resBody.result
          }
        })
      },
      initProductList () {
        this.listLoading = true
        var params = {
          type: this.loginType,
          pageNumber: this.page,
          companyId: this.product.companyId,
          pageSize: this.pageSize,
          productCode: this.product.productCode,
          productType: this.product.productType, // 产品类型
//          dpt: this.$refs.dptCitySel.input, // 出发地
//          arr: this.$refs.arrCitySel.input, // 目的地
          dpt: this.product.dpt, // 出发地
          arr: this.product.arr, // 目的地
          productMainTitle: this.product.productMainTitle, // 途游产品名称主标题
          supplyProductName: this.product.supplyProductName, // 供应商产品名称
          productState: this.product.productState, // 产品状态,true=有效,false= 无效
          auditState: this.product.auditState
        }
        this.$http.post('/smartLight/web/productTour/getPageList.htm', params).then(response => {
          var resBody = response.body
          if (resBody.isSuccess === 0) {
            this.total = resBody.result.totalElements
            this.productList = resBody.result.content
            this.listLoading = false
          } else if (resBody.isSuccess === 2) {
            this.listLoading = false
            sessionOut(this) // session超时处理
          } else {
            this.$message({
              showClose: true,
              message: resBody.errorMsg,
              type: 'error'
            })
          }
        })
      },
      // 格式化时间
      formatCreateTime (row, index) {
        var d = new Date(row.createTime)
        var year = d.getFullYear()
        var month = ((d.getMonth() + 1) < 10 ? '0' + (d.getMonth() + 1) : (d.getMonth() + 1))
        var date = (d.getDate() < 10 ? '0' + d.getDate() : d.getDate())
        var hour = (d.getHours() < 10 ? '0' + d.getHours() : d.getHours())
        var minute = (d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes())
        var second = (d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds())
        return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second
      },
      // 操作日志弹框
      operatLog (row) {
        if (!this.checkIfLogin()) {
          return
        }
        this.dialogTableVisible = true
        this.listLoading1 = true
        this.product1 = Object.assign({}, row)
        var params = {
          productId: row.id,
          pageNumber: this.page1,
          pageSize: this.pageSize,
          type: this.loginType
        }
        this.operatLogList(params)
      },
      operatLogList (params) {
        this.$http.post('/smartLight/web/productLog/getList.htm', params).then(response => {
          var resBody = response.body
          if (resBody.isSuccess === 0) {
            this.total1 = resBody.result.totalElements
            this.operationLogData = resBody.result.content
            this.listLoading1 = false
          } else if (resBody.isSuccess === 2) {
            this.listLoading1 = false
            sessionOut(this) // session超时处理
          } else {
            this.$message({
              showClose: true,
              message: '操作失败',
              type: 'error'
            })
          }
        })
      },
      // 按钮权限控制
      getAuth (index) {
        let buttonIds = sessionStorage.getItem('buttonIds')
        let buttonId = ''
        if (buttonIds === null) {
          return false
        }
        buttonIds = ',' + buttonIds + ','
        if (this.loginType === 0) { // 运营
          buttonId = ',' + this.adminButtons[index] + ','
          if (buttonIds.indexOf(buttonId) >= 0) {
            return true
          } else {
            return false
          }
        } else if (this.loginType === 1) { // 供应商
          buttonId = ',' + this.ebButtons[index] + ','
          if (buttonIds.indexOf(buttonId) >= 0) {
            return true
          } else {
            return false
          }
        } else {
          return false
        }
      }
    },
    mounted () {
      // 浏览器向前或向后处理
      resetBreads(this)
      // 初始化产品列表
      var user = sessionStorage.getItem('user')
      if (user) {
        user = JSON.parse(user)
        this.loginType = user.type
        if (this.loginType === 0) {
          this.getAllCompany()
        }
        this.initProductList()
      }
    },
    components: {
//      city2,
//      city
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .is-light
    max-width: 600px;
  .tabRow
    font-size: 12px;
  .button-align
    float: right;
  .el-dialog--small
    width: 37% ;
  .prompt
    color: #ff4949
    line-height: 10px !important;
    display: block;

  #formheight
    margin: 14px 0;
    height: 38px;
    .el-form-item__content
      height: 30px;
      .el-form-item__error
        margin-top:3px
    .el-input
      height: 30px;
      .el-input__inner
        height: 30px;

  .borderStyle
    .el-input .el-input__inner {
      border-color: #ff4949 !important;
    }
  .cell
    padding-left: 0px !important
    padding-right 0px !important
    overflow: hidden !important
    text-overflow: ellipsis !important
    white-space: nowrap !important
    .el-checkbox {
      padding-left: 15px !important
    }
  #pagination
    background-color: transparent
    .el-input__inner
      width: 120px

  .el-dialog
    max-height:600px;
    overflow-y :auto;
</style>
